<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LED数字</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/led.css" />
    <style>
        body {
            background-color: #000;
        }

       .circle {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            transform: translateY(-90px);
        }

       .time-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

       .date-section,
       .time-section {
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app" class="time-container">
        <!-- 显示年月日 -->
        <div class="date-section">
            <div v-for="(digit, index) in date" :key="index">
                <my-led :value="digit"></my-led>
            </div>
        </div>
        <!-- 显示时分秒 -->
        <div class="time-section">
            <div v-for="(digit, index) in time" :key="index">
                <my-led :value="digit"></my-led>
                <span v-if="(index === 1 || index === 3)" class="circle"></span>
            </div>
        </div>
    </div>
    <script src="js/led.js" type="text/javascript" charset="utf-8"></script>
    <script>
        Vue.createApp({
            components: {
               'my-led': Led
            },
            data() {
                return {
                    date: [0, 0, 0, 0, 0, 0, 0, 0], // 年月日
                    time: [0, 0, 0, 0, 0, 0] // 时分秒
                }
            },
            created() {
                setInterval(this.getTime, 1000);
            },
            methods: {
                getTime() {
                    // 获取当前时间
                    var now = new Date();
                    let year = now.getFullYear().toString().padStart(4, '0');
                    let month = String(now.getMonth() + 1).padStart(2, '0');
                    let day = String(now.getDate()).padStart(2, '0');
                    let hours = String(now.getHours()).padStart(2, '0');
                    let minutes = String(now.getMinutes()).padStart(2, '0');
                    let seconds = String(now.getSeconds()).padStart(2, '0');

                    // 更新年月日数据
                    this.date = year.split('').map(Number).concat(month.split('').map(Number)).concat(day.split('').map(Number));

                    // 更新时分秒数据
                    this.time = hours.split('').map(Number).concat(minutes.split('').map(Number)).concat(seconds.split('').map(Number));
                }
            }
        }).mount('#app');
    </script>
</body>

</html>